<template>
  <div class="recommend-card box-shadow hover-style" v-if="!getIsPhone">
    <div class="card-inner">
      <div class="title border-bottom">
        <title-editor 
          :placeholder="'自定义名称'" 
          @click="deleteLinkCard"
          @update="editedLinkData"
          :value="linkDetails.linkTitle"
          :linkData="linkDetails"
        ></title-editor>
      </div>
      <div class="content" @click="checkLinkDetail">
        <general-info-card :linkDetails="linkDetails"></general-info-card>
        <div class="bottom">
          <span class="icon">
            <i class="iconfont icontg_tuiguanglianjie"></i>
          </span>
          <span class="icon">
            <i class="iconfont icontg_erweima"></i>
          </span>
          <span class="icon">
            <i class="iconfont icontg_yaoqingma"></i>
          </span>
        </div>
      </div>
    </div>
    <link-detail 
      :placeholder="'自定义名称'" 
      @update="editedLinkData"
      @click="hideDetails"
      @delete="deleteLinkCard"
      :value="linkDetails.linkTitle"
      :linkDetails="linkDetails"
      :showLinkDetails="showLinkDetails"
    ></link-detail>
  </div>
  <div class="recommend-card" v-else>
    <div class="title border-bottom">
      <title-editor 
        placeholder="自定义名称"
        @click="deleteLinkCard"
        @update="editedLinkData"
        :value="linkDetails.linkTitle"
        :linkData="linkDetails"
      ></title-editor>
    </div>
    <div class="content" @click="checkLinkDetail">
      <general-info-card :linkDetails="linkDetails"></general-info-card>
    </div>
    <link-detail 
      :linkDetails="linkDetails"
      :showLinkDetails="showLinkDetails"
      @click="hideDetails"
      @delete="deleteLinkCard"
      @edit="editedLinkData"
    ></link-detail>
    <!-- <link-detail></link-detail> -->
  </div>
</template>

<script>
import TitleEditor from './title-editor'
import LinkDetail from './link-detail'
import GeneralInfoCard from './general-info-card'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'
import RefundRateDisplay from '@/components/base/refund-rate-display/refund-rate-display'


import {mapGetters} from 'vuex'
export default {
  components: {
    LinkDetail,
    TitleEditor,
    HeaderTemplatePhone,
    HeaderBack,
    RefundRateDisplay,
    GeneralInfoCard
  },
  props: {
    linkDetails: {
      type: Object,
      default: function() {
        return {
          accountType: '代理',
          visited: 1989,
          registed: 26,
          lotteryRefund: 2000,
          lotteryRefundRate: 0.26,
          agRefund: 2000,
          agRefundRate: 0.26,
          chrownRefund: 2000,
          chrownRefundRate: 0.26,
          bonus: 2000,
          bonusRate: 0.26,
          salary: 2000,
          salaryRate: 0.26,
          link: 'www.baidu.com',
          invitingCode: 'ABCDEDFR23F'
        }
      }
    }
    
  },
  data() {
    return {
      readOnly: true,
      inputValue: "",
      showLinkDetails: false,
    }
  },
  methods: {
    checkLinkDetail() {
      this.showLinkDetails = true 
      console.log('click', this.showLinkDetails)
    },
    hideDetails() {
      this.showLinkDetails = false 
    },
    updateValue(e) {
      this.inputValue = e.target.value 
    },
    setEditable() {
      this.readOnly = true
    },
    hidePopup() {
      this.showLinkDetails = false 
    },
    deleteLinkCard() {
      this.$emit('delete', this.linkDetails.id)
    },
    editedLinkData(data) {
      this.$emit('click', data)
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px)
    .recommend-card 
      width 276px 
      height 160px 
      border-radius 3px 
      border 1px solid $color-divide-line
      margin-bottom 20px
      box-sizing border-box
      .title 
        display flex 
        height 40px 
        align-items center 
        justify-content space-between
        box-sizing border-box 
        padding 0 10px
      .content
        display flex 
        flex-direction column 
        .bottom 
          font-size 0 
          .icon 
            display inline-block
            width 36px 
            height 36px 
            border-radius 50% 
            border 1px solid $color-divide-line  
            margin 0 10px
            &:last-child 
              margin-right none
            .iconfont 
              font-size 36px
      .link-details 
        position fixed 
        top 0
        left 0
        right 0
        bottom 0 
        background rgba($color-theme-dark, 0.1)
        z-index 1000
        box-sizing border-box 
        .link-content
          position absolute 
          left 50%
          top 50% 
          transform translate(-50%, -50%)
          border-radius 3px
          width 580px 
          height 420px 
          background-color #fff
          box-sizing border-box 
          .left-part 
            width 210px 
          .right-part 

            .links 
              .link 
                padding 20px 0
                text-align left 
                .bold 
                  font-weight 700
                .red  
                  color $color-theme-red 
                .content 
                  margin-top 10px 
              .qrcode-wrapper 
                width 127px 
                margin-top 10px
                img 
                  width 100% 
  @media screen and (max-width 750px)
    .recommend-card 
      width 100% 
      box-sizing border-box
      .title 
        display flex 
        height 40px 
        align-items center 
        justify-content space-between
        box-sizing border-box 
        padding 0 10px
        input 
          outline none 
          background none
          min-width 200px
        .operate 
          display flex 
          .op
            display flex 
            align-items center
            // width 51px
            &.edit 
              .icon 
                border 1px solid $color-theme-dark  
            &.delete 
              color $color-theme-red 
              margin-left 10px
              .icon 
                border 1px solid $color-theme-red  
                .iconfont  
                  color $color-theme-red 
            .icon 
              width 16px 
              height 16px 
              border-radius 50% 
              display inline-block
              margin-right 5px
      .content
        display flex 
        flex-direction column 
        justify-content space-evenly
        .top 
          display flex 
          justify-content space-around
          margin 16px 0 
          .item 
            display flex 
            flex-direction column
            text-align center
            .item-title 
              margin-bottom 10px
              color $color-sub-grey 
            .item-content 
              color $color-theme-red        
</style>